<template>
    <div class="header">
        <div class="logo">
            一八小说
        </div>
        <diV class="navigation">
            <router-link v-for="nav in navs" :key="nav.id" :to="nav.path"
                :class="$route.path === nav.path ? 'active' : '' ">{{nav.title}}</router-link>
        </diV>
        <div class="login">
            <a @click="login" v-if="!userInfo.id">
                登录
            </a>
            <img :src="userInfo.avatar_url" @click="isSelect = !isSelect" @mouseenter="isSelect = true" v-else>
            <div class="select" v-if="isSelect" @mouseleave="isSelect = false">
                <ul>
                    <li @click="gotoUser">我的主页</li>
                    <li @click="gotoBookshelf">我的书架</li>
                    <li @click="close">退出登录</li>
                </ul>
            </div>
        </div>

        <div class="search">
            <input type="text" placeholder="输入书名/作者名/关键词"  @keyup.enter="gotoSerach">
            <div class="s_icon">
                <el-icon><Search /></el-icon>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, watch, computed } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import mainStore from '@/stores'
import { userInfoApi } from '@/api/front'
const store = mainStore()
const $route = useRoute()
const $router = useRouter()
const navs = reactive([
    {
        id: 1,
        title: "首页",
        path: "/channel"
    },
    {
        id: 2,
        title: "书库",
        path: "/all"
    },
    {
        id: 3,
        title: "排行榜",
        path: "/rank"
    }
])
//登录
let login = () => {
    store.isLogin = true
}
//退出登录
let close = () => {
    store.userInfo.username = ''
    store.userInfo.password = ''
    localStorage.clear()
    $router.replace({
        path:"/"
    })
    userInfo.value = ''
}
//登录之后显示选择项
let isSelect = ref(false)
let userInfo: any = ref({

})
//跳转
let gotoUser= ()=>{
    $router.push({
        name:"info"
    })
}
let gotoBookshelf = ()=>{
    $router.push({
        name:"bookshelf"
    })
}
//跳转到搜索页
let gotoSerach = ()=>{
    $router.push({
        name:'search'
    })
}
let getUserInfo = (userId: number) => {
    userInfoApi(userId).then((res: any) => {
        if (res.code === 200) {
            userInfo.value = res.data
            if (res.data.authority === '管理员') {
                navs.push({
                    id: 4,
                    title: "后台",
                    path: '/admin'
                })
            }
        }
    })
}
let moute_func = () => {
    let userId: string | null = localStorage.getItem('userId') || null
    if (userId) {
        getUserInfo(Number(userId))
    }
}
//
let isHeaderStateUpdate = computed(() => {
    return store.isHeaderStateUpdate
})
watch(isHeaderStateUpdate, (n, o) => {
    if (n) {
        moute_func()
    }
})
onMounted(moute_func)
</script>

<style lang='scss' scoped>
.header {
    height: 64px;
    line-height: 64px;
    box-sizing: border-box;
    background-color: #FFF;
    box-shadow: -2px 1px 10px 0px #b8b6b6;

    .logo {
        float: left;
        color: #1ABC9C;
        font-size: 30px;
        font-weight: 700;
        padding: 0 50px;
        cursor: pointer;
    }

    .navigation {
        padding-left: 10px;
        height: 100%;
        float: left;

        a {
            padding: 0 30px;
            height: 100%;
            display: inline-block;
        }

        a:hover {
            color: #1ABC9C;
        }
    }

    .search {
        float: right;
        position: relative;
        input {
            height: 26px;
            margin: 19px 30px;
            padding: 0 30px 0 15px;
            border-radius: 15px;
            font-size: 14px;
            border: 1px solid #666;
            color: #666;
        }
        .s_icon{
            position: absolute;
            top: 3px;
            right: 38px;
            i{
                font-size: 17px;
                height: 20px;
                line-height: 20px;

            }
        }
    }

    .login {
        float: right;
        padding: 0 10px;
        margin-right: 30px;
        position: relative;

        a {
            cursor: pointer;
            display: block;
            height: 26px;
            margin: 16px 0;
            line-height: 26px;
            padding: 3px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            color: #777;
        }

        img {
            margin-top: 12px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            border: 1px solid #f3f3f3;
            border-radius: 50%;
        }

        .select {
            top: 65px;
            left: -20px;
            position: absolute;
            width: 110px;

            ul {
                list-style: none;
                padding: 0 15px;
                font-size: 14px;

                li {
                    text-align: center;
                    background-color: #fff;
                    color: #666;
                    line-height: 30px;
                }

                li:hover {
                    color: #1ABC9C;
                    cursor: pointer;
                }
            }
        }
    }

    .active {
        color: #FFF;
        background: #1ABC9C;
    }

}
</style>